<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. poly-line (多段线)
    1. points 是 poly-line（多段线）的基本属性
    2. points 定义了多段线的各个顶点的 x 和 y 坐标
    3. 坐标之间用空格隔开
    4. 最后一个坐标与第一个坐标相同，会自动闭合
    -->
    <svg
      width="200"
      height="200"
      viewBox=""
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" style="fill: pink" />
      <!-- <polyline
        points="10,20 40,30 50,60 80,70"
        style="stroke: red; fill: transparent"
      /> -->
      <!-- 楼梯 -->
      <polyline
        points="30,30 40,30 40,40 50,40 50,50 60,50 60,60 70,60 70,70 80,70 80,80 90,80 90,90 100,90 100,100"
        style="fill: white; stroke: black; stroke-width: 2px"
      />
    </svg>
  </body>
</html>
